前阵子在折腾 MCP，今天终于有机会和大家聊聊 Figma MCP 这个神器。
说实话，可能有些小伙伴已经听过甚至用过它，但我还是想说一句：别小看 MCP！它对产品、设计师、前端开发，真的能带来不小的提升。
这次，我就用 Figma MCP，撸了一个超好看的天气应用界面：
MCP 到底是什么？（for 小白）
你可以把 MCP 想象成 AI 模型的”万能转换器”或者”USB-C 接口”。就像 USB-C 让各种设备都能连在一起，MCP 也让 AI 模型能标准化地对接不同数据源和工具。
开始前的准备
使用 MCP，我们需要先安装好 Nodejs：
本地下载并且安装 Cursor：
安装 Figma MCP
打开 Cursor，访问 Cursor Settings：
访问 MCP 面板，然后点击“添加 MCP Server”的按钮：
在打开的 json 文件中，添加以下配置：
"Framelink Figma MCP":{
"command":"npx",
"args":["-y","figma-developer-mcp","--figma-api-key=YOUR-KEY","--stdio"]
},
保存，然后访问 Figma 官网：https://www.figma.com
点击左上角头像，打开 Settings：
在 Security 面板，点击创建新的 Token：
然后勾选上所有的权限，起个名字，就能拿到 Token 了：
将拿到的 Token，填写替换到刚刚配置文件的“YOUR KEY”那里：
保存之后返回，看到 MCP Server 那里变绿了，就说明安装成功了：
还原设计稿效果
我们直接在 Figma 设计稿中，拷贝对应的图层，右键选择「Copy link to selection」：
然后，在 Cursor 当中输入以下提示词：
@https://www.figma.com/design/xxxxx/Weather-App-UI-Design--Community-?node-id=2-1403&t=NDhMocYIvzEu6wyb-4
帮我实现上述Figma面板的效果，要求：
- 不要访问整个Figma文件，要传入node参数进去
- 代码使用React技术栈，存放在demo项目下
- 如果有图片，或者CSS难以实现的Figma元素，帮我下载对应的图片
- 需要仔细分析Figma元素属性，保证最终的效果还原度
- 写完代码后，直接启动预览
我在第一次跑的时候，没跑起来，遇到了报错，没有关系，直接丢给 Cursor 让它解决就好：
然后，我们就得到了第一版：
看起来非常不错！主要界面基本都还原了，包括 Tab 是可以切换的。 但还原效果也不能说是非常完美。
接下来几个小问题，我直接给它指出来，Prompt 如下：
图1是你实现的版本，图2是设计稿，你根据设计稿对比一下，帮我把不一致的地方还原，要求：
- 房子的图片需要还原
- 底部的Button、Map、List三个图标需要还原
- 可以重新访问画板数据，可以重新下载图片
他修改了一版，主要把底部的图标还原了一下：
对于这个还原效果，我打 70 分，再精细的可能需要仔细对照设计稿和代码细节让它去调整了。
接下来，让它还原另一个页面，还是同样的 Prompt：
@https://www.figma.com/design/xxxx/Weather-App-UI-Design--Community-?node-id=55-2454&t=R3RJ2QsPeVSzklzH-4
你帮我再实现一下这个界面，要求：
- 不要访问整个Figma文件，要传入node参数进去
- 代码使用React技术栈，存放在demo项目下
- 如果有图片，或者CSS难以实现的Figma元素，帮我下载对应的图片
- 需要仔细分析Figma元素属性，保证最终的效果还原度
它的实现效果如下：
这个还原效果我可以给到 80 分，只有一些文字、icon 和异形需要额外再处理下就好了。
60 分的水平？
体验下来，我认为当前 Figma MCP 大概的还原程度可以达到 60 分的水平，对于复杂的设计稿，还原效果还是差了点意思。
Figma MCP 整体其实就是两个接口，一个是获取画板的源数据，一个是下载图片，只需要这两个原子功能，就能实现整个页面，听起来还是蛮震撼的。
一个很重要的认知是，不要小看这 60 分的水平：
60 分的水平，意味着你可以在日常工作中能提效 60%！
如果你是设计师或产品，你可以把设计稿做规范一些，简单一些，那么 达到 80、90 分的水平是完全没有问题的。
设计稿反推需求文档
模型完全理解设计稿的数据之后，如果是产品经理，我们还可以让模型来完善整体的需求文档。
我用的提示词非常简单：
根据这个页面设计，帮我完成需求文档的撰写
如果有完整的需求文档格式要求，也可以直接丢给他，一般来说模型给到的文档会更加细致，便于开发理解和实现。
期待 80 分的效果
因为我之前搞过一段时间的 D2C（Design To Code），也就是设计稿转代码，其实这个里面可以用很多工程手段去达到设计稿还原的准确度。
希望很多成熟的 D2C 平台能够参与到 MCP 生态的建设当中，这样设计稿还原至少可以达到 80 分的水平，真正做到普惠大众。
希望今天的分享对你有帮助，我们下期再见。
文章来源：微信公众号-孟健的AI编程认知，原始发表时间：2025年04月29日。